import React, { memo, useState } from 'react';

import { Divider, Table } from 'antd';
import { ProForm, ProToolBar } from '@/base-ui';
import DivWrapper from './style';

import {
  PageSearchConfig,
  FormColumns,
  FormDataSource,
  SearchSelector,
  buttonGroup
} from './config';

const GetUseManage = memo(() => {
  const [searchMore, setSearchMore] = useState(false);

  return (
    <DivWrapper>
      {searchMore ? (
        <>
          <ProForm formItems={PageSearchConfig} />
          <Divider style={{ margin: '10px 0 20px' }} />
        </>
      ) : null}
      <ProToolBar
        searchSelector={SearchSelector}
        isMoreSearchShow={searchMore}
        onMoreSearchClick={setSearchMore}
        buttonGroup={buttonGroup}
      />
      <Table
        dataSource={FormDataSource}
        columns={FormColumns}
        scroll={{ x: 1300 }}
      />
    </DivWrapper>
  );
});

export default GetUseManage;
